<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>销售员管理</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
	
	<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/echarts.js"></script>
	
	<script type="text/javascript">
	
$(function(){
	 $("#year").val(new Date().getFullYear());
	 initLine();
})

function initLine(){
	

	var lineChart = echarts.init(document.getElementById('line'));
	var option = null;
	option = {
title: {
    text: '销售量月度折线'
},
tooltip: {
    trigger: 'axis'
},
legend: {
    data:['销售量']
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
toolbox: {
    feature: {
        saveAsImage: {}
    }
},
xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
},
yAxis: {
    type: 'value'
},
series: [
    {
        name:'销量',
        type:'line',
        stack: '总量',
        data:[]
    }
]
}
	var a = new String($('#year').val());
	//异步加载数据
	$.get('${pageContext.request.contextPath}/page.rulermonth.ashx?year='+a).done(function (data) {
		
	    // 填入数据
	    lineChart.setOption({
	    	
	        series: [{
	            // 根据名字对应到相应的系列
	            name: '销量',
	            data: data
	        }]
	    });
	}); 
		
		if (option && typeof option === "object") {
			lineChart.setOption(option, true);
		}
}




function hha() {
	initLine();
}

	</script>

</head>
<body>
	  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="line" style="width: 1100px;height:450px;"></div>
    <div>
    	选择年度:<select id="year" onchange="hha()">
    		<option value='2016'>2016</option> 
    		<option value='2017'>2017</option> 
    		<option value='2018'>2018</option> 
    		<option value='2019'>2019</option> 
    		<option value='2020'>2020</option> 
    		</select>
    </div>
</body>
</html>